<template>
  <div class="hello">
    <as-header title="Toast" fixed>
      <router-link to="/" slot="left" class="link" >
        <span class="iconfont icon-zuosanjiao"></span>
      </router-link>
    </as-header>
    <div class="messagebox-container">
      <as-button @click.native="toastShow('info', '默认显示')"
        >显示 info toast</as-button
      >
      <as-button @click.native="toastShow('success', '成功了')"
        >显示 success toast</as-button
      >
      <as-button @click.native="toastShow('error', '失败了')"
        >显示 error toast</as-button
      >
      <as-button @click.native="toastShow('warning', '警告')"
        >显示 warning toast</as-button
      >
      <as-button @click.native="toastShow('noIcon')">无图标 toast</as-button>
      <as-button @click.native="toastShow('loading')">loading</as-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Toast',
  mounted() {},
  methods: {
    toastShow(type, msg) {
      if (type == 'loading') {
        this.$Toast.loading()
        setTimeout(() => {
          this.$Toast.close()
        }, 2000)
        return
      }
      if (type == 'noIcon') {
        this.$Toast({
          isIcon: false,
          msg: '无图标'
        })
        return
      }
      this.$Toast({
        type: type,
        msg,
        duration: 1500,
        onClose() {
          console.log('message fn')
        }
      })
      console.log(this.$mToast)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.btn-class {
  margin: 10px 15px;
}
</style>
